<nz-card>
  <form nz-form [formGroup]="validateForm">
    <div nz-row>
      <!-- Left -->
      <div nz-col [nzSpan]="12">
        <p class="mform-title">
          <i nz-icon nzType="tag" nzTheme="outline"></i>
          基本资料
        </p>
        <div class="mform-control">
          <nz-form-item>
            <nz-form-label [nzFlex]="flexLabelWidth" nzRequired>开发者</nz-form-label>
            <nz-form-control nzFlex="1" nzErrorTip="请选择开发者!">
              <nz-select
                nzShowSearch
                nzAllowClear
                nzPlaceHolder="请选择开发者"
                formControlName="developerId">
                <nz-option
                  *ngFor="let option of developerOptons"
                  [nzLabel]="option.companyName"
                  [nzValue]="option.id"
                ></nz-option>
              </nz-select>
            </nz-form-control>
          </nz-form-item>

          <nz-form-item>
            <nz-form-label [nzFlex]="flexLabelWidth" nzRequired>游戏名称</nz-form-label>
            <nz-form-control nzFlex="1" nzErrorTip="请输入游戏名称!">
              <input nz-input placeholder="请输入游戏名称" formControlName="name" />
            </nz-form-control>
          </nz-form-item>

          <nz-form-item>
            <nz-form-label [nzFlex]="flexLabelWidth" nzRequired>游戏图标</nz-form-label>
            <nz-form-control nzFlex="1" nzErrorTip="请选择游戏图标!">
              <zdy-upload
                uploadFileName="game-manage"
                formControlName="icon"
              ></zdy-upload>
              <span class="pay-ipt-tip">128 * 128 px</span>
            </nz-form-control>
          </nz-form-item>

          <nz-form-item>
            <nz-form-label [nzFlex]="flexLabelWidth">游戏角标</nz-form-label>
            <nz-form-control nzFlex="1">
              <zdy-upload
                uploadFileName="game-manage"
                formControlName="cornerMarker"
              ></zdy-upload>
            </nz-form-control>
          </nz-form-item>

          <!-- <nz-form-item>
            <nz-form-label [nzFlex]="flexLabelWidth" nzRequired>游戏链接</nz-form-label>
            <nz-form-control nzFlex="1" nzErrorTip="请输入游戏链接!">
              <input nz-input placeholder="请输入游戏链接" formControlName="gameUrl" />
            </nz-form-control>
          </nz-form-item> -->

          <nz-form-item>
            <nz-form-label [nzFlex]="flexLabelWidth">广告语</nz-form-label>
            <nz-form-control nzFlex="1">
              <input nz-input placeholder="请输入广告语" formControlName="subtitle" />
            </nz-form-control>
          </nz-form-item>

          <nz-form-item>
            <nz-form-label [nzFlex]="flexLabelWidth">应用描述</nz-form-label>
            <nz-form-control nzFlex="1">
              <input nz-input placeholder="请输入应用描述" formControlName="remark" />
            </nz-form-control>
          </nz-form-item>

          <nz-form-item>
            <nz-form-label [nzFlex]="flexLabelWidth">游戏导图</nz-form-label>
            <nz-form-control nzFlex="1">
              <zdy-upload
                limitSize="1"
                uploadFileName="game-manage"
                formControlName="coverPhoto"
              ></zdy-upload>
            </nz-form-control>
          </nz-form-item>

          <nz-form-item>
            <nz-form-label [nzFlex]="flexLabelWidth">支付回调地址</nz-form-label>
            <nz-form-control nzFlex="1">
              <input nz-input placeholder="请输入支付回调地址" formControlName="backUrl" />
              <span class="pay-ipt-tip"># 支付对接使用</span>
            </nz-form-control>
          </nz-form-item>
        </div>

        <nz-divider nzDashed></nz-divider>

        <p class="mform-title">
          <i nz-icon nzType="tag" nzTheme="outline"></i>
          证件资料
        </p>
        <div class="mform-control">
          <nz-form-item>
            <nz-form-label [nzFlex]="flexLabelWidth">著作权证书</nz-form-label>
            <nz-form-control nzFlex="1">
              <zdy-upload
                uploadFileName="game-manage"
                [isUploadAliyun]="true"
                formControlName="copyright"
              ></zdy-upload>
            </nz-form-control>
          </nz-form-item>

          <nz-form-item>
            <nz-form-label [nzFlex]="flexLabelWidth">游戏版号</nz-form-label>
            <nz-form-control nzFlex="1">
              <zdy-upload
                uploadFileName="game-manage"
                [isUploadAliyun]="true"
                formControlName="isbn"
              ></zdy-upload>
            </nz-form-control>
          </nz-form-item>

          <nz-form-item>
            <nz-form-label [nzFlex]="flexLabelWidth">授权书</nz-form-label>
            <nz-form-control nzFlex="1">
              <zdy-upload
                uploadFileName="game-manage"
                [isUploadAliyun]="true"
                formControlName="authorization"
              ></zdy-upload>
            </nz-form-control>
          </nz-form-item>

          <nz-form-item>
            <nz-form-label [nzFlex]="flexLabelWidth">授权时间</nz-form-label>
            <nz-form-control nzFlex="1">
              <nz-range-picker
                [(ngModel)]="warrantDates"
                [ngModelOptions]="{standalone: true}"
              ></nz-range-picker>
            </nz-form-control>
          </nz-form-item>
        </div>
      </div>

      <!-- Right -->
      <div nz-col [nzSpan]="12">
        <p class="mform-title">
          <i nz-icon nzType="tag" nzTheme="outline"></i>
          分成资料
        </p>
        <div class="mform-control">
          <nz-form-item>
            <nz-form-label [nzFlex]="flexLabelWidth" nzRequired>分成方式</nz-form-label>
            <nz-form-control nzFlex="1" nzErrorTip="请选择分成方式!">
              <nz-radio-group formControlName="sharingMode">
                <ng-container *ngFor="let option of sharingOptions">
                  <label nz-radio [nzValue]="option.value">{{ option.label }}</label>
                </ng-container>
              </nz-radio-group>

              <i
                nz-icon
                nzType="exclamation-circle"
                nzTheme="outline"
                nz-tooltip
                [nzTooltipTitle]="titleTemplateA"
              ></i>
              <ng-template #titleTemplateA>
                <p>激活可赚：商家帮用户安装APP后，用户启动APP，商家即可赚钱</p>
                <p>注册可赚：商家帮用户安装APP后，用户注册APP，商家即可赚钱</p>
                <p>充值分成：商家获得下级用户充值分成</p>
                <p>消费分成：商家获得下级用户消费分成</p>
              </ng-template>
            </nz-form-control>
          </nz-form-item>

          <nz-form-item *ngIf="validateForm.value.sharingMode">
            <nz-form-label [nzFlex]="flexLabelWidth" nzRequired>
              {{ [1, 2].includes(validateForm.value.sharingMode) ? '可赚' : '分成比例' }}
            </nz-form-label>
            <nz-form-control nzFlex="1" nzErrorTip="请输入数值!">
              <nz-input-number
                style="width: 150px;"
                [nzMin]="0"
                [nzStep]="1"
                [nzPrecision]="2"
                nzPlaceHolder="请输入"
                formControlName="commission"
              ></nz-input-number>
              {{ [1, 2].includes(validateForm.value.sharingMode) ? '元' : '%' }}
            </nz-form-control>
          </nz-form-item>

          <nz-form-item>
            <nz-form-label [nzFlex]="flexLabelWidth">已赚基数</nz-form-label>
            <nz-form-control nzFlex="1">
              有
              <nz-input-number
                style="width: 150px;"
                [nzMin]="0"
                [nzStep]="1"
                [nzPrecision]="0"
                nzPlaceHolder="请输入"
                formControlName="earnedBase"
              ></nz-input-number>
              人共赚
              <nz-input-number
                style="width: 150px;"
                [nzMin]="0"
                [nzStep]="1"
                [nzPrecision]="2"
                nzPlaceHolder="请输入"
                formControlName="totalAmount"
              ></nz-input-number>
              元

              <i
                nz-icon
                nzType="exclamation-circle"
                nzTheme="outline"
                class="m-l-8"
                nz-tooltip
                nzTooltipTitle="填写模拟数据，与真实数据相加后，将在前端展示综合数据，两个填写框需同时填写才可生效"
              ></i>
            </nz-form-control>
          </nz-form-item>
        </div> 

        <nz-divider nzDashed></nz-divider>

        <p class="mform-title">
          <i nz-icon nzType="tag" nzTheme="outline"></i>
          其他资料
        </p>
        <div class="mform-control">
          <nz-form-item>
            <nz-form-label [nzFlex]="flexLabelWidth" nzRequired>用户</nz-form-label>
            <nz-form-control nzFlex="1" nzErrorTip="请选择用户!">
              <nz-radio-group formControlName="userType">
                <label nz-radio [nzValue]="0">通用</label>
                <label nz-radio [nzValue]="1">C端</label>
                <label nz-radio [nzValue]="2">B端</label>
              </nz-radio-group>
            </nz-form-control>
          </nz-form-item>

          <nz-form-item>
            <nz-form-label [nzFlex]="flexLabelWidth" nzRequired>推广渠道</nz-form-label>
            <nz-form-control nzFlex="1" nzErrorTip="请选择推广渠道!">
              <zdy-checkbox-group
                *ngIf="channelOptions.length"
                [checkOptions]="channelOptions"
                [isAllCheck]="false"
                [(ngModel)]="channelSelected"
                [ngModelOptions]="{standalone: true}"
                (singCheckedChange)="channelChange()"
              ></zdy-checkbox-group>
            </nz-form-control>
          </nz-form-item>

          <ng-container *ngIf="channelSelected.includes(1)">
            <nz-form-item>
              <nz-form-label [nzFlex]="flexLabelWidth" nzRequired>安装方式</nz-form-label>
              <nz-form-control nzFlex="1" nzErrorTip="请选择安装方式!">
                <nz-radio-group formControlName="installMode">
                  <ng-container *ngFor="let option of installOptions">
                    <label
                      nz-radio
                      [nzDisabled]="option.value === 3"
                      [nzValue]="option.value"
                    >{{ option.label }}</label>
                  </ng-container>
                </nz-radio-group>
              </nz-form-control>
            </nz-form-item>
  
            <nz-form-item>
              <nz-form-label [nzFlex]="flexLabelWidth" nzRequired>
                {{ validateForm.value.installMode == 1 ? '爱思APP ID' : '链接' }}
              </nz-form-label>
              <nz-form-control
                nzFlex="1"
                nzErrorTip="请输入{{ validateForm.value.installMode == 1 ? '爱思APP ID' : '链接' }}">
                <input
                  nz-input
                  placeholder="请输入{{ validateForm.value.installMode == 1 ? '爱思APP ID' : '链接' }}"
                  formControlName="gameUrl"
                />
              </nz-form-control>
            </nz-form-item>
          </ng-container>

          <nz-form-item>
            <nz-form-label [nzFlex]="flexLabelWidth" nzRequired>状态</nz-form-label>
            <nz-form-control nzFlex="1" nzErrorTip="请选择状态!">
              <nz-radio-group formControlName="state">
                <label nz-radio [nzValue]="0">启用</label>
                <label nz-radio [nzValue]="1">禁用</label>
              </nz-radio-group>
            </nz-form-control>
          </nz-form-item>

          <nz-form-item>
            <nz-form-label [nzFlex]="flexLabelWidth">分类</nz-form-label>
            <nz-form-control nzFlex="1" nzErrorTip="请选择分类!">
              <div ngDefaultControl formControlName="typeId">
                <nz-select
                  nzShowSearch
                  nzAllowClear
                  nzMode="multiple"
                  nzPlaceHolder="请选择分类"
                  [ngModelOptions]="{ standalone: true }"
                  [(ngModel)]="classifySelected"
                  (ngModelChange)="classifyChange($event)">
                  <nz-option
                    *ngFor="let option of classifyOptions"
                    [nzLabel]="option.name"
                    [nzValue]="option.id"
                  ></nz-option>
                </nz-select>
              </div>
            </nz-form-control>
          </nz-form-item>

          <nz-form-item>
            <nz-form-label [nzFlex]="flexLabelWidth" nzRequired>新游推荐</nz-form-label>
            <nz-form-control nzFlex="1" nzErrorTip="请选择新游推荐!">
              <nz-radio-group formControlName="isRecommend">
                <label nz-radio [nzValue]="0">是</label>
                <label nz-radio [nzValue]="1">否</label>
              </nz-radio-group>
            </nz-form-control>
          </nz-form-item>
        </div>
      </div>
    </div>
  </form>
</nz-card>

<nz-card class="m-t-4">
  <div nz-row nzJustify="center">
    <button
      nz-button
      nzType="primary"
      class="m-r-10"
      [nzLoading]="subLoading"
      (click)="submitFormData()"
    >保存</button>

    <button
      nz-button
      nzType="default"
      (click)="pageBack()"
    >返回</button>
  </div>
</nz-card>